<template>
  <view class="index-content">
    <nav-bar :title="'律创云法务'"></nav-bar>
    <view :style="marginTop" class="index-content-wrapper">
      <view class="top-container">
        <view class="swiper-container " v-if="!swiperListShow">
          <u-swiper
              :list="swiperList"
              radius="20"
              :autoplay="true"
              :interval="5000"
              :easingFunction="'linear'"
              :indicator="true"
              height="7rem"
              @click="swiperClick"
          ></u-swiper>
        </view>
      </view>
      <view class="container" :style="swiperListShow?'margin-top:0.5rem':''">
        <view class="index-s1">
          <swiper
              :indicator-dots="true"
              class="swiper"
              indicator-active-color="#d81e06"
          >
            <swiper-item v-for="(item1, index1) in swiperLength">
              <u-grid :col="5">
                <u-grid-item
                    v-for="(item, index) in lawAdviceList.slice(
                    index1 * 5,
                    (index1 + 1) * 5
                  )"
                    :index="index"
                    :key="index"
                    @click="lawAdviceClick(item, index)"
                >
                  <image :src="item.icon"></image>
                  <text>{{ item.title }}</text>
                </u-grid-item>
              </u-grid>
            </swiper-item>
          </swiper>
        </view>
        <!-- <view class="img-container">
          <text>预留960*55图片位</text>
        </view> -->
      </view>
      <view class="index-s2-container">
        <view class="wrapper">
          <text class="title"
          >不知道如何解决您的问题?不知道如何找到靠谱律师 ?
          </text
          >
          <text class="sub-title">-快速为您优选法律解决方案-</text>
          <solution-vue></solution-vue>
        </view>
      </view>
      <view class="index-s2-container">
        <view class="wrapper wrapper1">
          <u-grid :border="false" col="2">
            <u-grid-item
                v-for="(item, index) in gridItemList"
                style="margin-top: 0.5rem"
                @click="gridItemClick(item, index)"
            >
              <view class="grid-item">
                <image :src="item.img"></image>
                <text>{{ item.title }}</text>
              </view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
      <u-toast ref="uToast"></u-toast>
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/nav-bar.vue";
import solutionVue from "../components/solution.vue";
import bannerConst from "@/static/const/bannerConst";
import consultAndServiceConst from "@/static/const/consultAndServiceConst";
import bgBase64 from "@/static/const/bgBase64";
import {isEmptyArray, isEmptyString, toast} from "@/utils/common";

export default {
  components: {
    NavBar,
    solutionVue,
  },
  data() {
    return {
      marginTop: "",
      indicator: true,
      swiperList: [], //轮播图
      swiperListShow: false,
      lawAdviceList: [],
      lawServerList: [
        {
          id: 1,
          title: "律师服务",
          produce: "律师服务111111",
          cover: "/static/images/index/index-server-1.png",
        },
        {
          id: 1,
          title: "律师服务",
          produce: "律师服务111111",
          cover: "/static/images/index/index-server-1.png",
        },
      ],
      lawTeamList: [
        {
          id: 1,
          name: "张三",
          avatar: "https://cdn.uviewui.com/uview/album/1.jpg",
          produce:
              "律师服务111111,擅长合同纠纷，房产纠纷，版权纠纷，知识产权，商务诉讼，刑事辩护，婚姻家庭",
          children: ["商务纠纷", "婚姻家庭", "刑事辩护"],
        },
        {
          id: 1,
          name: "李四",
          avatar: "https://cdn.uviewui.com/uview/album/1.jpg",
          produce: "律师服务111111",
          children: ["商务纠纷", "婚姻家庭", "刑事辩护"],
        },
      ],
      swiperLength: 0,
      gridItemList: [
        {
          img: "http://211.149.139.63:8080/profile/upload/2023/01/16/index-server-1_20221230152838A002_20230116140025A010.png",
          title: "律师服务",
        },
        {
          img: "http://211.149.139.63:8080/profile/upload/2023/01/16/index-server-1_20221230152838A002_20230116140025A010.png",
          title: "自助文书生成",
        },
        {
          img: "http://211.149.139.63:8080/profile/upload/2023/01/16/index-server-1_20221230152838A002_20230116140025A010.png",
          title: "范本下载",
        },
        {
          img: "http://211.149.139.63:8080/profile/upload/2023/01/16/index-server-1_20221230152838A002_20230116140025A010.png",
          title: "图文咨询",
        },
      ],
      moreIcon: bgBase64.moreIcon,
    };
  },
  onLoad: function () {
    const top = uni.getSystemInfoSync().statusBarHeight + 44;
    this.marginTop = "margin-top:" + top + "px";

    this.getSwiperList();
    this.getLawAdviceList();
  },
  methods: {
    //获取轮播图列表
    getSwiperList() {
      this.$store
          .dispatch("GetBannerListByType", bannerConst.bannerIndex)
          .then((res) => {
            this.swiperList = res.data;
            if (isEmptyArray(this.swiperList)) {
              this.swiperListShow = true;
              return;
            }
            this.swiperList.forEach((item) => {
              item.url = item.pic;
            });
          });
    },
    //获取咨询列表
    getLawAdviceList() {
      this.$store
          .dispatch("ConsultAndServiceList", consultAndServiceConst.consult)
          .then((res) => {
            this.lawAdviceList = res.data;
            if (this.lawAdviceList.length >= 9) {
              this.lawAdviceList = this.lawAdviceList.slice(0, 9);
            }
            this.lawAdviceList.push({
              id: 0,
              title: "更多",
              icon: this.moreIcon,
            });
            this.swiperLength = parseInt(this.lawAdviceList.length / 5) + 1;
          });
    },
    // 轮播图点击事件
    swiperClick(e) {
      const item = this.swiperList[e];
      const linkType = item.linkType;
      switch (linkType) {
        case "1":
          //新闻
          if (isEmptyString(item.linkId)) {
            uni.switchTab({
              url: "/pages/news/index",
            });
          } else {
            uni.navigateTo({
              url: "/pages/news/detail?id=" + item.linkId,
            });
          }
          break;
        case "2":
          //法律咨询
          if (isEmptyString(item.linkId)) {
            uni.navigateTo({
              url: "/pages/lawadvice-list/index",
            });
          } else {
            uni.navigateTo({
              url: "/pages/telephone-consultation/index?id=" + item.linkId,
            });
          }
          break;
        case "3":
          //法律服务
          if (isEmptyString(item.linkId)) {
            uni.navigateTo({
              url: "/pages/law-service/index",
            });
          } else {
            uni.navigateTo({
              url: "/pages/law-service-detail/index?id=" + item.linkId,
            });
          }
          break;
        case "4":
          //律师详情
          if (isEmptyString(item.linkId)) {
            uni.navigateTo({
              url: "/pages/law-list-more/index",
            });
          } else {
            uni.navigateTo({
              url: "/pages/law-detail/index?id=" + item.linkId,
            });
          }
          break;
        default:
          toast("暂未开放");
          break;
      }
    },
    //横向列表点击事件
    lawAdviceClick(item, index) {
      //点击去法律咨询页面
      if (item.title.includes("更多")) {
        uni.navigateTo({
          url: "/pages/lawadvice-list/index",
        });
      } else {
        uni.navigateTo({
          url: "/pages/telephone-consultation/index?id=" + item.id,
        });
      }
    },
    //四个服务点击事件
    gridItemClick(item, index) {
      switch (index) {
        case 0:
          uni.navigateTo({
            url: "/pages/law-list-more/index",
          });
          break;
        case 1:
          uni.navigateTo({
            url: "/pages/docs/index",
          });
          // this.$modal.showToast("模块建设中");
          break;
        case 2:
          this.$modal.showToast("模块建设中");
          break;
        case 3:
          this.$modal.showToast("模块建设中");
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.index-content {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .index-content-wrapper {
    padding-bottom: 5rem;
  }

  .top-container {
    height: 3rem;
    background: linear-gradient(to right, rgb(93, 131, 255), rgb(69, 82, 228));
    position: relative;

    .swiper-container {
      width: 90%;
      position: absolute;
      left: 5%;
    }
  }

  .container {
    width: 100%;
    padding-left: 20 rpx;
    padding-right: 20 rpx;
    margin-top: 4.5rem;

    .index-s1 {
      background-color: white;
      border-radius: 10px;
      padding-top: 1rem;

      image {
        width: 2rem;
        height: 2rem;
      }

      text {
        font-size: 0.8rem;
        padding-top: 0.5rem;
      }

      .swiper {
        height: 5rem;

        /deep/ .uni-swiper-dot {
          width: 2rem;
          border-radius: 0%;
          margin-right: 0px;
          height: 3px;
        }
      }
    }

    .img-container {
      height: 2rem;
      width: 100%;
      background-color: aqua;
      border-radius: 10px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
    }
  }

  .index-s2-container {
    width: 100%;
    padding-left: 20 rpx;
    padding-right: 20 rpx;
    margin-top: 0.5rem;

    .wrapper {
      width: 100%;
      background-color: #fff;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
      padding-bottom: 0.5rem;
      padding-top: 0.8rem;

      .title {
        font-size: 0.5rem;
      }

      .sub-title {
        font-size: 1rem;
        margin-top: 0.5rem;
        font-weight: bolder;
      }
    }

    .wrapper1 {
      padding: 0.5rem;
    }

    .grid-item {
      width: 95%;
      display: flex;
      flex-direction: column;

      image {
        // width: 100%;
        height: 5rem;
      }

      text {
        padding-bottom: 0.5rem;
        text-align: center;
        padding-top: 0.5rem;
      }
    }
  }
}

.notice-bar {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 20 rpx;
  padding-right: 20 rpx;
}

/deep/ .u-notice-bar {
  background-color: rgba(255, 255, 255, 0) !important;
}

.soft-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 40 rpx;
  margin-top: 10 rpx;
  width: 120 rpx;
}

.index-s2 {
  width: 100%;
}

.index-s2-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 20 rpx;
  background-color: #fff;

  /deep/ .uni-card {
    padding-top: 0 rpx !important;
    border-radius: 10px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 20 rpx !important;
  }

  /deep/ .uni-card__cover {
    margin-top: 0px !important;
  }

  .card-wrapper {
    display: flex;
    flex-direction: column;
  }

  .title {
    font-size: 30 rpx;
  }

  .produce {
    font-size: 24 rpx;
  }
}

.law-produce-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .list {
    width: 100%;

    .item {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 20 rpx;

      .item-middle {
        display: flex;
        flex-direction: column;
        flex: 1;

        .title {
          font-size: 35 rpx;
          padding-left: 20 rpx;
        }
      }
    }
  }

  .u-grid-item {
    margin-top: 20 rpx;
  }
}
</style>
